<template>
	<div class="container">
		<navigationBar title="智定星球" rightType="icon" @rightClick="share()"
			:rightIcon="block? '/static/icon/icon_fengxianghongbao.png':''"></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight-1) + 'px;'">
			<div class="carousel">
				<swiper @change="changeVideo" :style="'height: ' + swiperHeight + 'px;'" :indicator-dots="dots"
					circular='true' duration="400" indicator-active-color="#FB8E26" indicator-color="#cccccc">
					<swiper-item class="swiper-item" v-for="(item,index) in detail.filesList" :key="index">
						<div class="image-wrapper">
							<!-- 视频 -->
							<video :objectFit='objectFit' v-if="!$utils.imgfileSuffix(item.fileSuffix)"
								:src="item.filePath" :id="'video'+index" @error="videoErrorCallback"
								:show-center-play-btn="true" :controls="control" :loop="true" :direction="direction"
								@play="openVideo(index)" @fullscreenchange="fullscreenchange"
								:show-fullscreen-btn="false" @click="toggle(index)"></video>
							<!-- 照片 -->
							<image @load="imgloadComplete" class="cover_img"
								v-if="$utils.imgfileSuffix(item.fileSuffix)" :src="item.filePath" mode="widthFix"
								@click="_previewImage(detail.filesList,index)">
							</image>
						</div>
					</swiper-item>
				</swiper>
			</div>

			<div class="user">
				<div class="user-item">
					<image @click.stop="$navSkin.toPersonel(detail.userId)" class="left" :src="detail.avatar"
						mode="aspectFill">
					</image>
					<div class="center">
						<div class="head"> {{detail.nickname || ''}} </div>
					</div>
					<div class="right right-red" v-if="!detail.follow" @click="follow(detail.userId)"> 关注 </div>
					<div class="right follow-active" v-if="detail.follow" @click="unfollow(detail.userId)"> 已关注 </div>
				</div>
				<div class="pri-row" v-if="detail.price">
					<div class="pri-left">
						<span class="price"><span class="price-icon">￥</span>{{detail.price || ''}}</span>
						<span v-if="detail.freeShipping" class="attr">包邮</span>
						<span class="cop-wrap" :class="detail.receiveCoupon?'cop-wrap-activce':''"
							v-if="detail.couponAmount" @click="showCouponAmount()">
							<span class="cop-price"
								:class="detail.receiveCoupon?'cop-price-activce':''">{{detail.receiveCoupon?'已领取':'领取'}}</span>
							<span class="cop-num"> 无门槛 {{detail.couponAmount || 0}} </span>
						</span>
					</div>
				</div>
				<div class="main-title">{{detail.title || ''}}</div>

				<div class="bottom" @click="isOpen()">
					<div :class="['con']">
						{{detail.content || ''}}
					</div>
					<div class="tag-wrap">
						<div class="tag" v-for="(item,index) in detail.topicList">#{{item.name || ''}}</div>
					</div>

					<!-- <span :class="['con',isMore ? '' : 'hide']">{{article}}<span class="tag">#话题</span></span>
					<div class="unfold" v-if="article.length > 30" >{{isMore == true? '收起' : '展开全文'}}</div> -->
				</div>
				<div class="time" id="comment-area">
					{{ detail.createTime? $utils.timestampFormat(Date.parse( detail.createTime)/1000) : ''}}
					{{detail.address || ''}} 浏览量：{{detail.visitCount}}
				</div>
			</div>

			<div class="comment-box">
				<div class="comment-title">共{{detail.commentCount || '0'}}条评论</div>
				<div class="input-wrap">
					<image class="left" :src="userInfo.avatar" mode="aspectFill"></image>
					<div class="right" @click="openComment('level1','说点什么')">
						<input type="text" style="pointer-events: none;" v-model="comment_content"
							placeholder-class="input-place" placeholder="留下你的想法吧" />
					</div>
				</div>
				<!-- 一级 -->
				<div class="comment-wrap" v-for="(item,indexParent) in list" :key="indexParent"
					@longpress.stop="delComment(item.id,indexParent,null,false,item.userId)">
					<div class="comment-left">
						<image class="user-pic" :src="item.avatar" mode="aspectFill"
							@click="$navSkin.toPersonel(item.userId)"></image>
					</div>
					<div class="comment-right">
						<div class="like">
							<image v-if="!item.isFavorite" src="../../static/icons/like_off.png" mode=""
								@click="favoriteComment(item)">
							</image>
							<image v-else src="../../static/icons/like_on.png" mode=""
								@click="cancelFavoriteComment(item)">
							</image>
						</div>
						<div class="comment-right-name" @click="openComment(item.id,'回复@'+item.nickname)">
							{{item.nickname}}
						</div>
						<!-- 评论的文字 -->
						<div class="comment-right-desc" @click="openComment(item.id,'回复@'+item.nickname)">
							<span class="atUser" v-for="(userItem,index) in item.atUserList"
								@click.stop="$navSkin.toPersonel(userItem.id)">
								@{{userItem.nickname}}
							</span>
							{{item.content}}
						</div>
						<!-- 评论的商品 -->
						<div class="comment-note" v-if="item.type == 3">
							<div class="buy" @click="$navSkin.toProduct(item.commentInformationId)">
								<div class="buy-left">
									<image class="buy-pic"
										v-if="item.firstFileSuffix !== 'png' && item.firstFileSuffix !== 'jpg' && item.firstFileSuffix !== 'jpge'"
										:src="item.firstCoverPath" mode="aspectFill"></image>
									<image class="buy-pic" v-else :src="item.firstPicturePath" mode="aspectFill">
									</image>
									<div class="pri-wrap">
										<span class="pri-title">{{item.title}}</span>
										<div class="pri-box" v-if="item.price">
											<span class="price">
												<span class="price-icon">￥</span>{{item.price}}
											</span>
											<span class="attr" v-if="item.freeShipping">包邮</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 评论的图片 -->
						<image class="comment-right-pic" v-if="item.img" @click="$utils.previewImage(item.img,0)"
							:src="item.img" mode="widthFix"></image>
						<div class="comment-time" @click="openComment(item.id,'回复@'+item.nickname)">
							{{ item.createTime? $utils.timestampFormat(Date.parse( item.createTime)/1000) : ''}} <span
								class="rep"></span>
							<span class="rep">回复</span>
						</div>
						<!-- 二级 -->
						<div class="comment-second-wrap" style="border: none;" v-if="indexChild == 0"
							v-for="(itemChild,indexChild) in item.comments" :key="indexChild"
							@longpress.stop="delComment(itemChild.id,indexParent,indexChild,true,item.userId)">
							<div class="comment-second-left">
								<image class="comment-second-user-pic" :src="itemChild.avatar" mode="aspectFill">
								</image>
							</div>
							<div class="comment-second-right">
								<div class="like">
									<image v-if="!item.isFavorite" src="../../static/icons/like_off.png" mode=""
										@click="favoriteComment(itemChild)">
									</image>
									<image v-else src="../../static/icons/like_on.png" mode=""
										@click="cancelFavoriteComment(itemChild)">
									</image>
								</div>
								<div class="comment-second-right-name">{{itemChild.nickname}}</div>
								<!-- 二级评论的文字 -->
								<div class="comment-second-right-desc">
									<span class="atUser" v-for="(userItem,index) in item.atUserList"
										@click.stop="$navSkin.toPersonel(userItem.id)">
										@{{userItem.nickname}}
									</span>
									{{itemChild.content}}
								</div>
								<!-- 评论的商品 -->
								<div class="comment-note" v-if="itemChild.type == 3">
									<div class="buy" @click="$navSkin.toProduct(itemChild.commentInformationId)">
										<div class="buy-left">
											<image class="buy-pic"
												v-if="itemChild.firstFileSuffix !== 'png' && itemChild.firstFileSuffix !== 'jpg' && itemChild.firstFileSuffix !== 'jpge'"
												:src="itemChild.firstCoverPath" mode="aspectFill"></image>
											<image class="buy-pic" v-else :src="itemChild.firstPicturePath"
												mode="aspectFill">
											</image>
											<div class="pri-wrap">
												<span class="pri-title">{{itemChild.title}}</span>
												<div class="pri-box">
													<span class="price">
														<span class="price-icon">￥</span>{{itemChild.price}}
													</span>
													<span class="attr" v-if="itemChild.freeShipping">包邮</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- 二级评论的图片 -->
								<image class="comment-img" v-if="itemChild.img"
									@click="$utils.previewImage(itemChild.img,0)" :src="itemChild.img" mode=""></image>
							</div>
						</div>
						<div class="comment-second-wrap" style="border: none;" v-if="indexChild !== 0 && item.isShow"
							v-for="(itemChild,indexChild) in item.comments" :key="indexChild"
							@longpress.stop="delComment(itemChild.id,indexParent,indexChild,true,item.userId)">
							<div class="comment-second-left">
								<image class="comment-second-user-pic" :src="itemChild.avatar" mode="aspectFill">
								</image>
							</div>
							<div class="comment-second-right">
								<div class="like">
									<image src="../../static/icons/like_off.png" mode=""></image>
								</div>
								<div class="comment-second-right-name">{{itemChild.nickname}}</div>
								<div class="comment-second-right-desc">{{itemChild.content}}</div>
								<image class="comment-img" v-if="itemChild.img"
									@click="$utils.previewImage(itemChild.img,0)" :src="itemChild.img" mode=""></image>
							</div>
						</div>
						<div class="other-comment" v-if="indexChild == item.comments.length-1 && indexChild !== 0"
							v-for="(itemChild,indexChild) in item.comments" @click="moreComment(indexParent)">
							{{item.isShow?'收起':'展开'}}{{item.comments.length-1}}条回复>
						</div>
					</div>
				</div>


				<!-- <div class="emty" v-if="list.length<1">
					<image src="../../static/icon/icon_wuneirong.png" mode=""></image>
					快给楼主写评论吧！
				</div> -->
			</div>
		</div>
		<div class="footer-send" v-if="detail.type == 2">
			<div class="send-setting">
				<div class="like">
					<image src="/static/icons/like1_off.png" @click="favoriteInformation()" v-if="!detail.favorite"
						mode="aspectFit"></image>
					<image src="/static/icons/like_on.png" @click="cancelFavoriteInformation()" v-if="detail.favorite"
						mode="aspectFit"></image>
					{{detail.favoriteCount > 999 ? 999:detail.favoriteCount}}
				</div>
				<div class="like">
					<image src="/static/icons/collect_off.png" mode="aspectFit" @click="collectInformation()"
						v-if="!detail.collect"></image>
					<image src="/static/icons/collect_on.png" mode="aspectFit" @click="cancelCollectInformation()"
						v-if="detail.collect"></image>
					{{detail.collectCount > 999 ? 999:detail.collectCount}}
				</div>
				<div class="like" @click="scrollTo('comment-area')">
					<image src="../../static/icons/news_off.png" mode="aspectFit"></image>
					{{detail.commentCount> 999 ? 999:detail.commentCount}}
				</div>
			</div>
			<div class="want" @click="toBuy(detail.id)">
				我想要
			</div>
		</div>
		<div class="footer-send" v-if="detail.type == 1">
			<div class="send-input" @click="openComment(null,'说点什么')">
				<div class="emoticon">
					<image src="/static/icons/icon-edit.png" mode=""></image>
				</div>
				<div class="input">
					<input type="text" :disabled="true" v-model="comment_content" style="pointer-events: none;"
						placeholder-style="font-size: 28rpx;color: #999999;" placeholder="说点什么" />
				</div>
			</div>
			<div class="send-setting">
				<div class="like-right">
					<image src="/static/icons/like1_off.png" @click="favoriteInformation()" v-if="!detail.favorite"
						mode="aspectFit"></image>
					<image src="/static/icons/like_on.png" @click="cancelFavoriteInformation()" v-if="detail.favorite"
						mode="aspectFit"></image>
					{{detail.favoriteCount > 999 ? 999:detail.favoriteCount}}
				</div>
				<div class="like-right">
					<image src="/static/icons/collect_off.png" mode="aspectFit" @click="collectInformation()"
						v-if="!detail.collect"></image>
					<image src="/static/icons/collect_on.png" mode="aspectFit" @click="cancelCollectInformation()"
						v-if="detail.collect"></image>
					{{detail.collectCount > 999 ? 999:detail.collectCount}}
				</div>
				<div class="like-right" @click="scrollTo('comment-area')">
					<image src="../../static/icons/news_off.png" mode="aspectFit"></image>
					{{detail.commentCount> 999 ? 999:detail.commentCount}}
				</div>
			</div>
		</div>
		<!-- @好友弹窗 -->
		<userPopup ref="userPop" :selected="mentionedFriends" @getUser="selectFriend">
		</userPopup>
		<!-- 评论 -->
		<uni-popup ref="send" type="bottom" :maskClick="true" @change="sendPopChange">
			<div class="user-list" v-if="mentionedFriends.length>0">
				<div class="user-item" v-for="(item,index) in mentionedFriends" :key="index">
					<image class="del" src="/static/icon/icon_shanchu2.png" mode="" @click="delUser(index)"></image>
					<span>@{{item.nickname}}</span>
				</div>
			</div>
			<div class="setPrice">
				<div class="row">
					<div class="wrap-input">
						<div class="text-wrap">
							<textarea :maxlength="-1" :auto-height="true" :focus="isFocus" :value="comment_content"
								@confirm="sumbit_comment()" @input="onInputChange" @focus="hideFriendList"
								placeholder-style="padding: 10rpx 20rpx;font-size: 26rpx;color: #BCBCBC;"
								:placeholder="place" :cursor-spacing="25" :show-confirm-bar="false">
							</textarea>
						</div>

					</div>
					<div class="send-img">
						<image @click="addUser" src="/static/icons/cell-pep.png" mode="aspectFit">
						</image>
						<image @click="handlerUpload" src="/static/icons/upload-img.png" mode="aspectFit"></image>
						<image @click="shopShow = !shopShow" src="/static/icons/shop.png" mode="aspectFit"></image>
					</div>
				</div>
				<div class="send-btn" @click="sumbit_comment()">发送</div>
			</div>
			<div class="shop" v-if="shopShow">
				<scroll-view class="orderlist" scroll-y="true" style="height: 780rpx;" lower-threshold="20"
					@scrolltolower="scrollLower">
					<div class="shop-list">

						<div class="shop-item" :class="item.id == commentInformationId ?'active':''"
							v-for="(item,index) in shopList" :key="index" @click="selectShop(item)">
							<image
								v-if="item.firstFileSuffix !== 'png' && item.firstFileSuffix !== 'jpg' && item.firstFileSuffix !== 'jpge'"
								:src="item.firstCoverPath" class="buy-pic" mode="aspectFill" />
							<image v-else :src="item.firstPicturePath" class="buy-pic" mode="aspectFill" />
							<div class="shop-title">
								{{item.title}}
							</div>
							<div class="pri-wrap">
								<span class="price" v-if="item.price"><span
										class="price-icon">￥</span>{{item.price}}</span><span class="attr"
									v-if="item.freeShipping">包邮</span>
							</div>
							<image v-if="item.id == commentInformationId" class="checked" src="/static/icon/checked.png"
								mode="">
							</image>
						</div>
						<!-- <uni-load-more v-if="false" :status="'loading'"
							:content-text="{contentnomore:'加载失败，请点击重试'}"></uni-load-more> -->
					</div>

				</scroll-view>
			</div>
			<div class="upload" v-if="uplaodShow">
				<div class="upload-list">
					<div class="upload-item">
						<image class="del" src="/static/icon/icon_shanchu2.png" mode="" @click="delCommentPic()">
						</image>
						<image :src="comment_pic" mode="aspectFill" @click="_previewImage([comment_pic],0)"></image>
					</div>
				</div>
			</div>
		</uni-popup>
		<uni-popup ref="couponPopup" type="center" :maskClick="false">
			<div class="reward">
				<div class="envelopes-body">
					<div class="enve-item">
						<div class="left rew-money">{{detail.couponAmount}}元</div>
						<div class="right ">优惠券</div>
					</div>
					<div class="btn" @click="receiveCoupon">领取</div>
				</div>


			</div>
		</uni-popup>
		<div class="empty" v-if="!block">
			<image class="empty-img" src="../../static/icon/icon_wu.png" mode=""></image>
			<div class="title">该信息已被作者删除或被隐藏</div>
		</div>
	</div>
</template>

<script>
	import data from '@/js/index/product/data.js';
	import methods from '@/js/index/product/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import userPopup from "@/components/user-popup.vue";
	export default {
		data,
		methods,
		onLoad(e) {
			this.id = e.id
			this.getData(this.id)
			this.getVisitInformation()
			this.getInformationCommentList()
			this.getMyInformationList()
		},
		onShow() {

			// setTimeout(() => {
			// 	this.$refs.send.open()
			// }, 1000)
		},
		onReachBottom() {
			this.getInformationCommentList()
		},
		onHide() {
			console.log('on hide')
		},
		// 分享
		onShareAppMessage: function(id) {
			this.share()
			return {
				title: this.detail.title,
				path: '/pages/index/product?id=' + this.id + '&shareUserId=' + this.userInfo.id || '-1', //分享时用自己的id
				imageUrl: this.$utils.imgfileSuffix(this.detail.firstFileSuffix) ? this.detail.firstPicturePath : this
					.detail.firstCoverPath
			}
		},
		onShareTimeline() {
			this.share()
			return {
				title: this.detail.title,
				path: '/pages/index/product?id=' + this.id + '&shareUserId=' + this.userInfo.id || '-1', //分享时用自己的id
				imageUrl: this.$utils.imgfileSuffix(this.detail.firstFileSuffix) ? this.detail.firstPicturePath : this
					.detail.firstCoverPath
			}
		},

		onUnload() {},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},
		components: {
			navigationBar,
			uniPopup,
			userPopup
		}
	};
</script>
<style>
	page {
		background: #FFF;
	}

	uni-page {
		background: #FFF;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/index/product.scss';

	page {
		height: 100%;
		height: 100%;
	}
</style>